<template>
  <el-button @click="visible = true" size="large" style="margin-left: 50px;" type="success">新增</el-button>
  <el-dialog v-model="visible" :close-on-click-modal="false" :close-on-press-escape="false">
    <el-form ref="dataFormRef" label-width="120px" :v-model="fromModel">
      <el-form-item label="主播id" prop="anchorId">
        <el-input placeholder="主播id" v-model="fromModel.anchorId"></el-input>
      </el-form-item>
      <el-form-item label="房间简介" prop="info">
        <el-input type="textarea" v-model="fromModel.info"></el-input>
      </el-form-item>
      <el-form-item label="房间公告" prop="notice">
        <el-input type="textarea" v-model="fromModel.notice"></el-input>
      </el-form-item>
      <el-form-item label="直播间封面" prop="coverId">
        <addFile ref="imgurl"></addFile>
      </el-form-item>
      <el-form-item label="是否禁播" prop="status">
        <el-switch v-model="fromModel.status" inline-prompt active-text="否" inactive-text="是" size="large" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span>
        <el-button @click="visible = false" style="margin-right: 10px;">取消</el-button>
        <el-button type="primary" @click="log">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, computed,inject } from "vue";
import { addLiveRoom } from "@/service/api";
import addFile from "../../components/addFile.vue";
const imgurl = ref()
const visible = ref(false)
// 默认数据
const defaultFrom = {
  anchorId: '',
  info: '',
  notice: '',
  coverId: '',
  tags: [],
  status: 0
}

// 表单数据
const fromModel = ref({ ...defaultFrom });

// 是否禁播状态文本
const statusText = computed(() => fromModel.value.status ? "0" : "1");

// 点击确定按钮时的逻辑
const log = async () => {
  try {
    validateForm(); // 验证表单数据
    await saveLiveRoom(); // 保存直播间信息
  } catch (error) {
    console.log("表单提交失败" + error);
  }
}

// 验证表单数据
const validateForm = () => {
  const { anchorId, info, notice } = fromModel.value;
  if (!anchorId) {
    throw new Error("主播id不能为空");
  }
  if (!info) {
    throw new Error("直播间简介不能为空");
  }
  if (!notice) {
    throw new Error("直播公告不能为空");
  }
}
const getLiveRoomList = inject<any>('getLiveRoomList')
// 保存直播间信息
const saveLiveRoom = async () => {
  // defaultFrom.coverId = url.value.coverId
  const requestData = { ...fromModel.value,coverId:imgurl.value.coverId, status: statusText.value };
  const response = await addLiveRoom(requestData);
  console.log(response.data.data);
  fromModel.value = { ...defaultFrom, ...response.data }; // 更新表单数据
  visible.value = false; // 关闭对话框
  getLiveRoomList()
};
</script>

<style scoped lang="less">
.avatar-uploader {
  :deep(.avatar) {
    width: 178px;
    height: 178px;
    display: block;
  }

  :deep(.el-upload) {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
  }

  :deep(.el-upload:hover) {
    border-color: var(--el-color-primary);
  }

  :deep(.el-icon.avatar-uploader-icon) {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
  }
}
</style>